<template>
 <div class="market-govern">
   <div class="back" @click="back"></div>
   <div class="page-top">
     市场治理
   </div>
   <div class="govern-main">
     <div class="govern-section1 left-top">
       <div class="govern-section1-title">
         事件处理
       </div>
       <div class="sjcl-section1">
         <div class="sjcl-section1-left">
           <div class="main-item" style="width: 119px;">
             <div class="main-item-name">事件数（个）</div>
             <div class="main-item-num">356</div>
           </div>
           <div class="main-item" style="width: 119px;">
             <div class="main-item-name">处理中（个）</div>
             <div class="main-item-num" style="color: #5AF772">356</div>
           </div>
           <div class="main-item" style="width: 119px;">
             <div class="main-item-name">已处理（个）</div>
             <div class="main-item-num" style="color: #F7625E">356</div>
           </div>
         </div>
         <div class="sjcl-section1-right">
           <div class="change-btns-item" :class="{'change-btns-selected': zzjgBtnIndex === 1}" @click="zzjgChange(1)">应急联动</div>
           <div class="change-btns-item" :class="{'change-btns-selected': zzjgBtnIndex === 2}" @click="zzjgChange(2)">物联设备</div>
           <div class="change-btns-item" :class="{'change-btns-selected': zzjgBtnIndex === 3}" @click="zzjgChange(3)">农都网络</div>
         </div>
       </div>
       <div class="section-sub-title" style="margin-top: 10px;">
         事件类别
       </div>
       <div id="sjcl-pie" style="width: 100%;height: 110px;"></div>
       <div class="section-sub-title" style="margin-top: 10px;">
         事件统计
       </div>
       <div id="sjtj-bar" style="width: 100%;height: 110px;"></div>
     </div>
     <div class="govern-section1 left-bottom">
       <div class="govern-section1-title">
         经营户信用
       </div>
       <div class="safety-list-title" style="margin-top: 20px;">
         <div class="safety-list-title-item" style="width: 20%;">经营户</div>
         <div class="safety-list-title-item" style="width: 25%;">事件</div>
         <div class="safety-list-title-item" style="width: 25%;">信用评分更新</div>
         <div class="safety-list-title-item" style="width: 30%;">时间</div>
       </div>
       <div class="safety-list-box" style="height: 81px;">
         <vue-seamless-scroll
             :data="gfxjyhListData"
             class="seamless-warp"
             :class-option="classOption">
           <div v-for="(item, index) in gfxjyhListData" :key="index" class="safety-list-box-item">
             <div class="item-section" style="width: 20%;">{{item.name}}</div>
             <div class="item-section" style="width: 25%;">{{item.type}}</div>
             <div class="item-section" style="width: 25%;">{{item.num}}</div>
             <div class="item-section" style="width: 30%;">{{item.tel}}</div>
           </div>
         </vue-seamless-scroll>
       </div>
       <div class="sjcl-section2">
         <div id="jyhxy-bar" style="float: left;width: 50%;height: 100%;"></div>
         <div class="section2-part">
           <div class="part-item">经营户信用预警</div>
           <div class="part-main">
            <div class="part-main-item" v-for="item in 4">
              <img src="../assets/images/marketSafety/sczl_operator_head.png" style="float: left;width: 50px;height: 55px;" alt="">
              <div class="operator-info">
                <div class="operator-info-part">
                  姓名：<span style="font-size: 14px;color: #00F6FF">张三</span>
                </div>
                <div class="operator-info-part">
                  信用分：<span style="font-size: 14px;color: #F0605C">21</span>
                </div>
              </div>
            </div>
           </div>
         </div>
       </div>
     </div>
     <div class="govern-center center-top">
       <div class="main-item">
         <div class="main-item-name">经营户（家）</div>
         <div class="main-item-num">356</div>
       </div>
       <div class="main-item">
         <div class="main-item-name">总网格人员数（人）</div>
         <div class="main-item-num">356</div>
       </div>
       <div class="main-item">
         <div class="main-item-name">管理人员数（人）</div>
         <div class="main-item-num">356</div>
       </div>
       <div class="main-item">
         <div class="main-item-name">从业人员数（人）</div>
         <div class="main-item-num">356</div>
       </div>
     </div>
     <div class="govern-center1 center-bottom">
       <div class="govern-section1-title">
         日常巡查
         <div class="grid-elect">
           <el-select v-model="gridValue" placeholder="请选择" size="mini" :popper-append-to-body="false">
             <el-option
                 v-for="item in gridOption"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value">
             </el-option>
           </el-select>
         </div>
       </div>
       <div class="safety-list-title" style="margin-top: 20px;">
         <div class="safety-list-title-item" style="width: 20%;">经营户</div>
         <div class="safety-list-title-item" style="width: 25%;">事件</div>
         <div class="safety-list-title-item" style="width: 25%;">信用评分更新</div>
         <div class="safety-list-title-item" style="width: 30%;">时间</div>
       </div>
       <div class="safety-list-box" style="height: 167px;">
         <vue-seamless-scroll
             :data="gfxjyhListData"
             class="seamless-warp"
             :class-option="classOption">
           <div v-for="(item, index) in gfxjyhListData" :key="index" class="safety-list-box-item">
             <div class="item-section" style="width: 20%;">{{item.name}}</div>
             <div class="item-section" style="width: 25%;">{{item.type}}</div>
             <div class="item-section" style="width: 25%;">{{item.num}}</div>
             <div class="item-section" style="width: 30%;">{{item.tel}}</div>
           </div>
         </vue-seamless-scroll>
       </div>
     </div>
     <div class="govern-right right-top">
       <div class="govern-section1-title">
         AI预警
       </div>
       <div class="ai-section1">
         <div id="ai-pie1" style="float: left; width: 60%;height: 100%;"></div>
         <div class="section1-right">
           <div class="main-item" style="height: 50%;">
             <div class="main-item-num" style="margin-top: 20px;font-size: 54px;font-weight: 400;">300</div>
             <div class="main-item-name" style="margin-top: 10px;">AI自动值守（路）</div>
           </div>
           <div class="main-item" style="height: 50%;">
             <div class="main-item-num" style="margin-top: 20px;font-size: 54px;font-weight: 400;">30</div>
             <div class="main-item-name" style="margin-top: 10px;">今日违规抓拍（次）</div>
           </div>
         </div>
       </div>
       <div id="ai-pie2" style="width: 100%;height: 200px;"></div>
       <div class="ai-section2" style="margin-top: 10px;">
         <div id="ai-line" style="float: left;width: 50%;height: 100%;"></div>
         <div id="ai-bar" style="float: left;width: 50%;height: 100%;"></div>
       </div>
       <div class="section-sub-title" style="margin-top: 30px;">
         事件类别
       </div>
       <div class="ai-section3">
         <el-carousel
             indicator-position="none"
             :interval="5000"
             height="200px">
           <el-carousel-item v-for="(item, index) in aiListData" :key="index">
             <div class="ai-warn-box" style="display: inline-block;float: left;">
               <img :src="item.url" style="float: left;width: 260px;height: 200px;margin-top: 0px;margin-left: 0px;" alt="">
               <div class="ai-warn-intro">
                 <div class="ai-warn-intro-item" style="margin-top: 8px;">
                   <div class="item-title">违规情况：</div>
                   <div class="item-text">{{ item.wg }}</div>
                 </div>
                 <div class="ai-warn-intro-item">
                   <div class="item-title">经营户：</div>
                   <div class="item-text">{{ item.operator }}</div>
                 </div>
                 <div class="ai-warn-intro-item">
                   <div class="item-title">摊位：</div>
                   <div class="item-text">{{ item.time }}</div>
                 </div>
                 <div class="ai-warn-intro-item">
                   <div class="item-title">时间：</div>
                   <div class="item-text">{{ item.time }}</div>
                 </div>
                 <div class="ai-warn-intro-item">
                   <div class="item-title">处置情况：</div>
                   <div class="item-text">{{ item.result }}</div>
                 </div>
                 <div class="ai-warn-intro-item">
                   <div class="item-title">处置时间：</div>
                   <div class="item-text">{{ item.dealTime }}</div>
                 </div>
               </div>
             </div>
           </el-carousel-item>
         </el-carousel>
       </div>
     </div>
   </div>
 </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "marketGovern",
  data () {
    return {
      zzjgBtnIndex: 1,
      gfxjyhListData: [
        {name: '王大力', type: '好人好事', num: '+5', master: '江锦萍', tel: '2022-06-16 12:00'},
        {name: '玛丽', type: '占道经营', num: '-3', master: '周文彰', tel: '2022-06-16 12:00'},
        {name: '王大力', type: '好人好事', num: '+5', master: '朱思伟', tel: '2022-06-16 12:00'},
        {name: '玛丽', type: '占道经营', num: '-3', master: '叶之宇', tel: '2022-06-16 12:00'},
        {name: '王大力', type: '好人好事', num: '+5', master: '张东科', tel: '2022-06-16 12:00'},
        {name: '玛丽', type: '占道经营', num: '-3', master: '祝原', tel: '2022-06-16 12:00'},
      ],
      aiPieOptions: {
        series: [
          {
            name: 'AI预警',
            type: 'pie',
            center: ['50%', '50%'],
            radius: ['0', '60%'],
            itemStyle: {
              borderWidth: 4,
              borderColor: 'rgba(33, 66, 91, 1)'
            },
            label: {
              color: '#00F6FF',
              fontSize: 14,
              formatter: params => {
                return params.name + '：' + params.value
              },
              overflow: 'break'
            },
            labelLine: {
              length2: 0
            },
            data: [
              {
                name: '预警',
                value: 30,
                itemStyle: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                      offset: 0, color: '#08A4FF' // 0% 处的颜色
                    }, {
                      offset: 1, color: 'rgba(8, 154, 239, 0.2824)' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                  }
                }
              },
              {
                name: '处理',
                value: 20,
                itemStyle: {
                  color: '#00F6FF'
                }
              }
            ]
          }
        ]
      },
      ajblLinesOptions: {
        legend: {
          textStyle: {
            color: '#FFFFFF',
            padding: [0,-5,0,-5],
          },
          left: 'right',
          top: 25,
          lineStyle: {
            width: 0
          }
        },
        title: {
          text: '近7天违规处置趋势',
          textStyle: {
            color: '#00F6FF',
            fontSize: 16
          },
          left: 'center'
        },
        xAxis: {
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#FFFFFF'
          },
          data: ['08/08', '08/11', '08/15']
        },
        yAxis: {
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#FFFFFF'
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.3020)',
              type: 'dashed'
            }
          }
        },
        grid: {
          top: 50,
          left: 30,
          right: 10,
          bottom: 20
        },
        series: [
          {
            name: '违规次数',
            type: 'line',
            lineStyle: {
              color: '#1AF1FF',
              width: 2
            },
            symbol: 'circle',
            smooth: true,
            symbolSize: 6,
            itemStyle: {
              color: '#1AF1FF'
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgba(26, 241, 255, 0.30)' // 0% 处的颜色
                }, {
                  offset: 1, color: 'rgba(26, 241, 255, 0.05)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            data: [55, 82, 78]
          },
          {
            name: '处置次数',
            type: 'line',
            lineStyle: {
              color: '#00FFAF',
              width: 2
            },
            symbol: 'circle',
            smooth: true,
            symbolSize: 6,
            itemStyle: {
              color: '#00FFAF'
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgba(0, 255, 175, 0.3020)' // 0% 处的颜色
                }, {
                  offset: 1, color: 'rgba(0, 255, 175, 0.0510)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            data: [45, 72, 68]
          },
        ]
      },
      aiListData: [
        {operator: '王颖批发', wg: '卫生状况差', time: '2022/7/5 10:13:00', result: '已处理', dealTime: '2022/7/5 10:13', url: require('../assets/images/temp/temp_market1.jpeg')},
        {operator: '水产批发', wg: '占道经营', time: '2022/7/5 15:32:00', result: '已处理', dealTime: '2022/7/5 15:32', url: require('../assets/images/temp/temp_market2.jpeg')},
        {operator: '福宝蔬菜批发', wg: '未佩戴口罩', time: '2022/7/4 18:31:00', result: '已处理', dealTime: '2022/7/4 18:31', url: require('../assets/images/temp/temp_market1.jpeg')},
        {operator: '安心蔬菜', wg: '车辆违规停放', time: '2022/7/4 12:55:00', result: '已处理', dealTime: '2022/7/4 12:55', url: require('../assets/images/temp/temp_market2.jpeg')},
        {operator: '鹏程伟业', wg: '车辆违规停放', time: '2022/7/4 18:53:00', result: '已处理', dealTime: '2022/7/4 18:53', url: require('../assets/images/temp/temp_market1.jpeg')},
      ],
      gridValue: '',
      gridOption: [
        {
          label: '--请选择--',
          value: ''
        },
        {
          label: '网格1',
          value: 1
        }
      ]
    }
  },
  computed: {
    // 公告滚动自定义
    classOption() {
      return {
        step: 2, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.cityData.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 43, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 5000, // 单步运动停止的时间(默认值1000ms)
      }
    },
  },
  mounted() {
    this.initSjclPie()
    this.initSjtjBar()
    this.initJyhxyBar()
    this.initAiPie1()
    this.initAiPie2()
    this.initAiLine()
    this.initAiBar()
  },
  methods: {
    back () {
      this.$router.go(-1)
    },
    zzjgChange (index) {
      this.zzjgBtnIndex = index
    },
    //事件处理饼图
    initSjclPie () {
      let pie = echarts.init(document.getElementById('sjcl-pie'))
      let option = {
        title: {
          text: '186',
          textStyle: {
            color: '#FFFFFF',
            fontSize: 32
          },
          top: '35%',
          left: '28%'
        },
        tooltip: {

        },
        legend: {
          orient: 'vertical',
          right: 30,
          textStyle: {
            color: '#FFFFFF'
          },
          top: 'center',
          icon: 'circle',
          itemGap: 15
        },
        series: [
          {
            type: 'pie',
            center: ['35%', '50%'],
            radius: ['65%', '90%'],
            color: ['#00F6FF', '#FFD800', '#5AF772', '#FF6297', '#08A4FF'],
            label: {
              show: false
            },
            data: [
              {
                name: '违章违规1',
                value: 22
              },
              {
                name: '违章违规2',
                value: 45
              },
              {
                name: '违章违规3',
                value: 66
              },
              {
                name: '违章违规4',
                value: 45
              },
              {
                name: '违章违规5',
                value: 22
              }
            ]
          }
        ]
      }
      pie.setOption(option)
    },
    //事件处理柱状图
    initSjtjBar () {
      let bar = echarts.init(document.getElementById('sjtj-bar'))
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true,
              backgroundColor: 'rgba(73, 145, 254, 1)',
              padding: [5, 7, 5, 7]
            }
          },
          // formatter: '人数：{c}',
          textStyle: {
            color: '#FFF'
          },
          confine: true,
          backgroundColor: 'rgba(0, 0, 0, 0.5)',
          borderColor: 'transparent'
        },
        xAxis: {
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#FFFFFF'
          },
          data: ['蔬菜区', '水果区',  '空心菜', '网格3', '网格4', '网格5', '网格6']
        },
        yAxis: {
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#FFFFFF'
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.3020)',
              type: 'dashed'
            }
          }
        },
        grid: {
          top: 10,
          left:30,
          right: 10,
          bottom: 20
        },
        series: [
          {
            name: '事件统计',
            type: 'bar',
            barWidth: 16,
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: '#19FFF6' // 0% 处的颜色
                }, {
                  offset: 1, color: '#0096F4' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },
              borderRadius: [2,2,0,0]
            },
            data: [6, 7, 6, 7, 7, 6, 8]
          }
        ]
      }
      bar.setOption(option)
    },
    //经营户信用柱状图
    initJyhxyBar () {
      let bar = echarts.init(document.getElementById('jyhxy-bar'))
      let option = {
        title: {
          text: '经营户信用排名',
          left: 'center',
          textStyle: {
            fontSize: 16,
            color: '#00F6FF'
          },
          top: 10
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true,
              backgroundColor: 'rgba(73, 145, 254, 1)',
              padding: [5, 7, 5, 7]
            }
          },
          // formatter: '人数：{c}',
          textStyle: {
            color: '#FFF'
          },
          confine: true,
          backgroundColor: 'rgba(0, 0, 0, 0.5)',
          borderColor: 'transparent'
        },
        xAxis: {
          type: 'value',
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#FFFFFF'
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.3020)',
              type: 'dashed'
            }
          },
        },
        yAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#FFFFFF'
          },
          data: ['二氧化硫', '肉类水分', '亚硝酸盐','农药残留', '吊白块'].reverse()
        },
        grid: {
          top: 50,
          left:60,
          right: 10,
          bottom: 20
        },
        series: [
          {
            name: '检出商品排行',
            type: 'bar',
            symbol: 'circle',
            barWidth: 12,
            itemStyle: {
              color: {
                type: 'linear',
                x: 1,
                y: 0,
                x2: 0,
                y2: 0,
                colorStops: [{
                  offset: 0, color: 'rgba(0, 239, 255, 0.6471)' // 0% 处的颜色
                }, {
                  offset: 1, color: 'rgba(0, 239, 255, 0.2039)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },
              borderRadius: [0,2,2,0]
            },
            data: [18, 16, 14, 10, 5].reverse()
          }
        ]
      }
      bar.setOption(option)
    },
    //ai预警饼图1
    initAiPie1 () {
      echarts.init(document.getElementById('ai-pie1')).setOption(this.aiPieOptions)
    },
    //ai预警饼图2
    initAiPie2 () {
      let pie = echarts.init(document.getElementById('ai-pie2'))
      let option = {
        title: {
          text: 'AI抓拍分布',
          textStyle: {
            color: '#00F6FF',
            fontSize: 16
          },
          left: '26%'
        },
        tooltip: {

        },
        legend: {
          orient: 'vertical',
          right: 60,
          textStyle: {
            color: '#FFFFFF'
          },
          top: 'center',
          icon: 'circle',
          itemGap: 20
        },
        series: [
          {
            type: 'pie',
            center: ['35%', '55%'],
            radius: ['0', '70%'],
            color: ['#FFF200', '#FFB34A', '#F7625E', '#08A4FF', '#00EFFF', '#00FFAF'],
            label: {
              show: false
            },
            data: [
              {
                name: '卫生状况',
                value: 3
              },
              {
                name: '占道经营',
                value: 3
              },
              {
                name: '车辆违规停放',
                value: 3
              },
              {
                name: '未戴口罩',
                value: 6
              },
              {
                name: '人员离岗',
                value: 3
              },
              {
                name: '人群密度',
                value: 6
              }
            ]
          }
        ]
      }
      pie.setOption(option)
    },
    //ai预警折线图
    initAiLine (clear) {
      if (clear) {
        echarts.init(document.getElementById('ai-line')).clear()
      }
      echarts.init(document.getElementById('ai-line')).setOption(this.ajblLinesOptions)
    },
    //ai预警柱状图
    initAiBar () {
      let bar = echarts.init(document.getElementById('ai-bar'))
      let option = {
        title: {
          text: '经营户违规次数',
          left: 'center',
          textStyle: {
            fontSize: 16,
            color: '#00F6FF'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true,
              backgroundColor: 'rgba(73, 145, 254, 1)',
              padding: [5, 7, 5, 7]
            }
          },
          // formatter: '人数：{c}',
          textStyle: {
            color: '#FFF'
          },
          confine: true,
          backgroundColor: 'rgba(0, 0, 0, 0.5)',
          borderColor: 'transparent'
        },
        xAxis: {
          type: 'value',
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#FFFFFF'
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.3020)',
              type: 'dashed'
            }
          },
        },
        yAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#FFFFFF'
          },
          data: ['二氧化硫', '肉类水分', '亚硝酸盐','农药残留', '吊白块'].reverse()
        },
        grid: {
          top: 40,
          left:60,
          right: 10,
          bottom: 20
        },
        series: [
          {
            name: '检出商品排行',
            type: 'bar',
            symbol: 'circle',
            barWidth: 12,
            itemStyle: {
              color: {
                type: 'linear',
                x: 1,
                y: 0,
                x2: 0,
                y2: 0,
                colorStops: [{
                  offset: 0, color: 'rgba(0, 239, 255, 0.6471)' // 0% 处的颜色
                }, {
                  offset: 1, color: 'rgba(0, 239, 255, 0.2039)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },
              borderRadius: [0,2,2,0]
            },
            data: [18, 16, 14, 10, 5].reverse()
          }
        ]
      }
      bar.setOption(option)
    },
  }
}
</script>

<style lang="less" scoped>
@import "../assets/style/marketGovern.css";
</style>
